<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text" placeholder="测试输入框的事件">
  <script>
    const inpDom = document.querySelector('input')
    // 监听获得焦点
    inpDom.addEventListener('focus', () => {
      inpDom.style.width = '500px'
      inpDom.style.height = '100px'
      inpDom.style.fontSize = '30px'
    })

    // 监听失去焦点
    inpDom.addEventListener('blur', () => {
      inpDom.style.width = '200px'
      inpDom.style.height = '20px'
    })

    // 监听键盘按下
    // inpDom.addEventListener('keydown', () => {
    //   console.log('按下键盘')
    // })

    // 监听键盘抬起
    inpDom.addEventListener('keyup', (e) => {
      // console.log('抬起键盘', e)
      // 监听用户按下回车键
      if (e.key.toLowerCase() === 'enter') {
        console.log('用户按下回车键了')
      }
    })

    // 监听表单value值变化
    inpDom.addEventListener('input', (e) => {
      // e.target --> 事件对象所在的DOM对象
      // console.log(e.target)
      console.log(e.target.value)
    })
  </script>
</body>

</html>